import { h, init } from 'snabbdom'
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'

var patch = init([style,eventlisteners])
var dataLength = 6
var sortByRule = 'sn'
var originalData = [
    {sn: 1, title: '你的名字-1-title', desc: '《你的名字。》是由新海诚执导'},
    {sn: 2, title: '少年的你呀-2-title', desc: '是根据玖月晞小说改编，由曾国祥执导'},
    {sn: 3, title: '罗小黑战记-3-title', desc: '整个作品风格很“中国式”'},
    {sn: 4, title: '青春-4-title', desc: '这个不知道有没有'},
    {sn: 5, title: '西游记-5-title', desc: '白龙马'},
    {sn: 6, title: '还珠格格3-6-title', desc: '经典'}
];
var data = [
    originalData[0],
    originalData[1],
    originalData[2],
    originalData[3],
    originalData[4],
    originalData[5]
]
function viewShow(data){
    return h('li',{
        style:{
            listStyle: 'none',
            textAlign: 'left'
        }
    },[
        h('span.sn',data.sn),
        h('span.title',data.title),
        h('span.desc',data.desc),
        h('span.del',{
            on: {
                click:[del,data]
            }
        },'X')
    ])
}
function renderList(){
    return h('div.list',[
        h('ul', data.map(viewShow))
    ])
}
function vnode (data){
    return h('div#app',{
        style:{
            width: '800px',
            margin: '0 auto'
        },
    },[
        h('h1','Top 10 movies'),
        h('div.left',[
            h('span','sort by:'),
            h('span.ordBtn',{
                on: {
                    click:[sortRank, 'sn']
                }
            },'sn'),
            h('span.ordBtn',{
                on: {
                    click:[sortRank, 'title']
                    
                }
            },'title'),
            h('span.ordBtn',{
                on: {
                    click:[sortRank, 'desc']
                }
            },'desc'),
            h('span',{
                style: {
                    paddingLeft:'30px'
                }
            }, `当前排序规则为:${sortByRule}`)
        ]),
        h('div.right',{
            style:{
                float: 'right'
            }
        },[
            h('span.ordBtn',{
                on: {
                    click:addCount
                }
            },'add')
        ]),
        h('div.clear',''),
        renderList()
    ])
} 
let app = document.querySelector('#app')

let oldvNode = patch(app,vnode(data))

// 新增
function addCount(){
    dataLength++
    let obj = {
        sn: dataLength,
        title: dataLength + '-title',
        desc: dataLength + '-desc'
    }
    data.push(obj)
    oldvNode = patch(oldvNode,vnode(data))
}
// 排序
function sortRank(type){
    sortByRule = type;
    data.sort((a, b) => {
      if (a[type] > b[type]) {
        return 1;
      }
      if (a[type] < b[type]) {
        return -1;
      }
      return 0;
    });
    console.log(data,'jjjj')
    oldvNode = patch(oldvNode,vnode(data))
}

// 删除
function del(item){
    data = data.filter((data) => { return data !== item; });
    oldvNode = patch(oldvNode,vnode(data))
}

